{% extends "teacher/message.html" %}

{% block title %}学生管理{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row items-center justify-between mb-8 gap-4">
    <!-- 搜索栏 -->
    <form id="studentSearchForm" action="/teacher/student/search" method="GET" class="relative w-full md:w-1/2 lg:w-1/3">
        <input
            type="text"
            name="keyword"
            placeholder="搜索学生姓名/学号/班级"
            class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 text-sm"
            aria-label="学生搜索"
            value="{{ search_keyword }}"
            id="studentKeyword"
        >
        <button
            type="submit"
            class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary focus:outline-none bg-transparent p-0 m-0 transition-colors"
        >
            <i class="fa fa-search"></i>
        </button>
    </form>
</div>

{% if search_keyword %}
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
    <p class="text-sm text-blue-700">
        <i class="fa fa-search mr-2"></i>搜索结果："{{ search_keyword }}"（共 {{ students|length }} 条记录）
    </p>
</div>
{% endif %}

<div class="bg-white rounded-lg shadow-md p-6">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学号</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">性别</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">班级</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">专业</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">联系电话</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody id="studentTableBody">
                {% for student in students %}
                <tr data-student-id="{{ student.id }}" class="hover:bg-gray-50 transition-colors">
                    <!-- 学号 -->
                    <td class="px-6 py-4 text-sm text-gray-900">{{ student.student_no }}</td>
                    <!-- 姓名 -->
                    <td class="px-6 py-4 text-sm text-gray-900">{{ student.student_name }}</td>
                    <!-- 性别 -->
                    <td class="px-6 py-4 text-sm text-gray-900">{{ student.gender or "未指定" }}</td>
                    <!-- 班级名称（通过关联模型获取） -->
                    <td class="px-6 py-4 text-sm text-gray-900">
                        {{ student.class_.class_name if student.class_ else "未分配班级" }}
                    </td>
                    <!-- 专业（从班级模型获取） -->
                    <td class="px-6 py-4 text-sm text-gray-900">
                        {{ student.major if student.major else "未指定" }}
                    </td>
                    <!-- 课程 -->
                    <td class="px-6 py-4 text-sm text-gray-900">
                        {{ student.course_name or '未记录' }}
                    </td>
                    <!-- 联系电话 -->
                    <td class="px-6 py-4 text-sm text-gray-900">{{ student.telephone or "未提供" }}</td>
                    <!-- 查看按钮 -->
                    <td class="px-6 py-4 text-right">
                        <button class="text-primary hover:text-primary/80 view-student-btn" data-student-id="{{ student.id }}">
                            <i class="fa fa-eye mr-1"></i> 查看
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if not students %}
    <div class="p-12 text-center">
        <div class="mb-6">
            <i class="fa fa-user text-4xl text-primary/10 animate-spin"></i>
        </div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">暂无选课学生记录</h3>
        <p class="text-gray-500 mb-6">暂无选课学生信息</p>
    </div>
    {% endif %}
</div>

<!-- 学生详情模态框 -->
<div id="studentModal" class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl p-6 md:p-8 transform scale-95 transition-transform duration-300" id="studentModalContent">
        <button class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors" id="closeStudentModal">
            <i class="fa fa-times text-gray-500"></i>
        </button>

        <div class="flex items-center mb-6">
            <div id="studentModalIcon" class="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center mr-3">
                <i class="fa fa-user-graduate text-blue-500"></i>
            </div>
            <h2 class="text-xl font-bold text-gray-800" id="studentModalTitle">
                学生详情
            </h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 基础信息卡片 -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 w-full md:col-span-1">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-info-circle text-gray-500 mr-2"></i> 基础信息
                </h3>

                <div class="space-y-3">
                    <div class="flex">
                        <span class="w-1/3 text-sm text-gray-500">学号：</span>
                        <span class="w-2/3 text-sm text-gray-900" id="detailStudentNo"></span>
                    </div>
                    <div class="flex">
                        <span class="w-1/3 text-sm text-gray-500">姓名：</span>
                        <span class="w-2/3 text-sm text-gray-900" id="detailStudentName"></span>
                    </div>
                    <div class="flex">
                        <span class="w-1/3 text-sm text-gray-500">性别：</span>
                        <span class="w-2/3 text-sm text-gray-900" id="detailStudentGender"></span>
                    </div>
                    <div class="flex">
                        <span class="w-1/3 text-sm text-gray-500">年龄：</span>
                        <span class="w-2/3 text-sm text-gray-900" id="detailStudentAge"></span>
                    </div>
                </div>
            </div>

            <!-- 联系与班级信息卡片 -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 w-full md:col-span-1">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-school text-gray-500 mr-2"></i> 班级与联系信息
                </h3>

                <div class="space-y-3">
                    <div class="flex">
                        <span class="w-1/3 text-sm text-gray-500">所属班级：</span>
                        <span class="w-2/3 text-sm text-gray-900" id="detailStudentClass"></span>
                    </div>
                    <div class="flex">
                        <span class="w-1/3 text-sm text-gray-500">专业：</span>
                        <span class="w-2/3 text-sm text-gray-900" id="detailStudentMajor"></span>
                    </div>
                    <div class="flex">
                        <span class="w-1/3 text-sm text-gray-500">联系电话：</span>
                        <span class="w-2/3 text-sm text-gray-900" id="detailStudentPhone"></span>
                    </div>
                    <div class="flex">
                        <span class="w-1/3 text-sm text-gray-500">家庭地址：</span>
                        <span class="w-2/3 text-sm text-gray-900" id="detailStudentAddress"></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 关闭按钮 -->
        <div class="w-full flex items-center justify-end pt-4">
            <button type="button" class="px-5 py-2.5 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50" id="closeStudentDetailBtn">
                <i class="fa fa-times mr-1"></i> 关闭
            </button>
        </div>
    </div>
</div>

<!-- 字体图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- 外部CSS -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/teacher/student.css') }}">
    <script src="{{ url_for('static', filename='js/teacher_js/student_manage.js') }}"></script>
{% endblock %}